'use client';

import React, { useCallback } from 'react';
import { 
  CheckCircleIcon, 
  ExclamationCircleIcon,
  InformationCircleIcon,
  XCircleIcon
} from '@heroicons/react/24/outline';
import { useToast } from '@/components/ui/use-toast';
import { Toast, ToastClose } from '@/components/ui/toast';
import { 
  AlertTriangleIcon,
  Loader2Icon
} from 'lucide-react';

// 通知类型
export type NotificationType = 'success' | 'error' | 'info' | 'warning' | 'loading';

// 通知接口
export interface NotificationProps {
  type: NotificationType;
  title: string;
  description?: string;
  duration?: number;
  action?: React.ReactNode;
  onClose?: () => void;
}

// 导入全局toast实例，而不是在函数内部使用hook
import { toast as globalToast } from '@/components/ui/use-toast';

/**
 * 显示通知
 * @param props 通知属性
 */
export function showNotification(props: NotificationProps) {
  const {
    type = 'info',
    title,
    description,
    duration = type === 'error' ? 8000 : 5000, // 错误提示显示更久
    action,
    onClose
  } = props;
  
  // 根据类型返回适当的图标
  const getIcon = () => {
    switch (type) {
      case 'success':
        return <CheckCircleIcon className="h-5 w-5 text-green-500" />;
      case 'error':
        return <XCircleIcon className="h-5 w-5 text-red-500" />;
      case 'warning':
        return <AlertTriangleIcon className="h-5 w-5 text-amber-500" />;
      case 'loading':
        return <Loader2Icon className="h-5 w-5 text-blue-500 animate-spin" />;
      default:
        return <InformationCircleIcon className="h-5 w-5 text-blue-500" />;
    }
  };
  
  // 使用全局toast实例
  globalToast({
    title,
    description,
    duration,
    action,
    onClose,
    icon: getIcon(),
  });
}

/**
 * 成功通知
 * @param title 标题
 * @param description 描述
 * @param duration 持续时间（毫秒）
 */
export function showSuccess(title: string, description?: string, duration?: number) {
  showNotification({
    type: 'success',
    title,
    description,
    duration
  });
}

/**
 * 错误通知
 * @param title 标题
 * @param description 描述
 * @param duration 持续时间（毫秒）
 */
export function showError(title: string, description?: string, duration?: number) {
  showNotification({
    type: 'error',
    title,
    description,
    duration
  });
}

/**
 * 信息通知
 * @param title 标题
 * @param description 描述
 * @param duration 持续时间（毫秒）
 */
export function showInfo(title: string, description?: string, duration?: number) {
  showNotification({
    type: 'info',
    title,
    description,
    duration
  });
}

/**
 * 警告通知
 * @param title 标题
 * @param description 描述
 * @param duration 持续时间（毫秒）
 */
export function showWarning(title: string, description?: string, duration?: number) {
  showNotification({
    type: 'warning',
    title,
    description,
    duration
  });
}

/**
 * 加载通知
 * @param title 标题
 * @param description 描述
 * @returns 关闭通知的函数
 */
export function showLoading(title: string, description?: string): () => void {
  // 使用全局toast实例，而非hook
  const { id } = globalToast({
    title,
    description,
    duration: Infinity, // 永不自动关闭
    icon: <Loader2Icon className="h-5 w-5 text-blue-500 animate-spin" />,
  });
  
  // 返回关闭函数
  return () => globalToast.dismiss(id);
}

/**
 * 自定义通知组件
 */
export const NotificationToast: React.FC<{
  type: NotificationType;
  title: string;
  description?: string;
  action?: React.ReactNode;
  onClose?: () => void;
}> = ({ type, title, description, action, onClose }) => {
  // 根据类型返回适当的图标
  const getIcon = () => {
    switch (type) {
      case 'success':
        return <CheckCircleIcon className="h-5 w-5 text-green-500" />;
      case 'error':
        return <XCircleIcon className="h-5 w-5 text-red-500" />;
      case 'warning':
        return <AlertTriangleIcon className="h-5 w-5 text-amber-500" />;
      case 'loading':
        return <Loader2Icon className="h-5 w-5 text-blue-500 animate-spin" />;
      default:
        return <InformationCircleIcon className="h-5 w-5 text-blue-500" />;
    }
  };

  return (
    <Toast className="flex">
      <div className="flex items-start">
        <div className="shrink-0 mr-2">
          {getIcon()}
        </div>
        <div className="flex-1">
          <div className="font-medium">{title}</div>
          {description && <div className="text-sm text-gray-500">{description}</div>}
        </div>
        {action && <div className="shrink-0 ml-2">{action}</div>}
      </div>
      <ToastClose onClick={onClose} />
    </Toast>
  );
};

// 导出通知函数集合
export const notifications = {
  show: showNotification,
  success: showSuccess,
  error: showError,
  info: showInfo,
  warning: showWarning,
  loading: showLoading
}; 